import { useMemo, useRef, useState } from 'react';
import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import { Button, message, Upload, Image, Cascader } from 'antd';
import { useRequest } from 'ahooks';
import { uploadCourse, getLeader } from '@/services/supervisionApi';
import { request, useModel } from '@umijs/max';
import ColumnGroup from 'antd/es/table/ColumnGroup';
import { Color } from 'antd/es/color-picker';
import type { CascaderProps } from 'antd';

export default function SupervisionCoursePage() {

    interface Option {
        value: string | number;
        label: string;
        children?: Option[];
        disableCheckbox?: boolean;
    }

    const [selecttimeSlot, setSelecttimeSlot] = useState<any[]>([]);

    const options: Option[] = [
        {
            label: '周一',
            value: 'Monday',
            children: [
                { label: '1-2', value: '1-2' },
                { label: '3-4', value: '3-4' },
                { label: '5-6', value: '5-6' },
                { label: '7-8', value: '7-8' },
                { label: '9-10', value: '9-10' },
            ],
        },
        {
            label: '周二',
            value: 'Tuesday',
            children: [
                { label: '1-2', value: '1-2' },
                { label: '3-4', value: '3-4' },
                { label: '5-6', value: '5-6' },
                { label: '7-8', value: '7-8' },
                { label: '9-10', value: '9-10' },
            ],
        },
        {
            label: '周三',
            value: 'Wednesday',
            children: [
                { label: '1-2', value: '1-2' },
                { label: '3-4', value: '3-4' },
                { label: '5-6', value: '5-6' },
                { label: '7-8', value: '7-8' },
                { label: '9-10', value: '9-10' },
            ],
        },
        {
            label: '周四',
            value: 'Thursday',
            children: [
                { label: '1-2', value: '1-2' },
                { label: '3-4', value: '3-4' },
                { label: '5-6', value: '5-6' },
                { label: '7-8', value: '7-8' },
                { label: '9-10', value: '9-10' },
            ],
        },
        {
            label: '周五',
            value: 'Friday',
            children: [
                { label: '1-2', value: '1-2' },
                { label: '3-4', value: '3-4' },
                { label: '5-6', value: '5-6' },
                { label: '7-8', value: '7-8' },
                { label: '9-10', value: '9-10' },
            ],
        },
        {
            label: '周六',
            value: 'Saturday',
            children: [
                { label: '1-2', value: '1-2' },
                { label: '3-4', value: '3-4' },
                { label: '5-6', value: '5-6' },
                { label: '7-8', value: '7-8' },
                { label: '9-10', value: '9-10' },
            ],
        },
        {
            label: '周日',
            value: 'Sunday',
            children: [
                { label: '1-2', value: '1-2' },
                { label: '3-4', value: '3-4' },
                { label: '5-6', value: '5-6' },
                { label: '7-8', value: '7-8' },
                { label: '9-10', value: '9-10' },
            ],
        },
    ];

    const onChange: CascaderProps<Option, 'value', true>['onChange'] = (value) => {
        console.log(value);
        setSelecttimeSlot(value);
    };

    // 同时显示 两级菜单
    const displayRender = (labels: Array<string>) => labels.join('/');

    const columns = useMemo<ProColumns[]>(
        () => [
            {
                title: 'id',
                dataIndex: 'id',
                key: 'college',
                hideInSearch: true,
                render: (text) => <span style={{ color: "#1677FF" }}>{text}</span>,
                width: 70
            },
            {
                title: '用户名',
                dataIndex: 'nickName',
                width: 270,
                key: 'class',
            },
            {
                title: '账号',
                dataIndex: 'userName',
                key: 'arrangeCourse',
                hideInSearch: true,
            },
            {
                title: '头像',
                dataIndex: 'avatar',
                key: 'selectCourse',
                hideInSearch: true,
                render: (text) => <Image
                    width={50}
                    src={typeof text === 'string' ? text : ''}
                />
            },
            {
                title: "邮箱",
                dataIndex: 'email',
                key: 'unit',
                hideInSearch: true,
            },
            {
                title: "手机号码",
                dataIndex: 'phone',
                key: 'unit',
                hideInSearch: true,
            },
            {
                title: "分配时间段",
                dataIndex: 'timeSlot',
                key: 'course',
                render: () => {
                    return <Cascader
                        options={options}
                        onChange={onChange}
                        multiple
                        displayRender={displayRender}
                        maxTagTextLength={10}
                        maxTagCount={4}
                        defaultValue={[['Monday', '1-2'], ['Monday', '3-4']]}
                        style={{ minWidth: '55%' }}
                        disabled
                    />
                }
            },
            {
                title: '操作',
                valueType: 'option',
                key: 'option',
                render: (text, record, _, action) => [
                    <a
                        key="editable"
                        onClick={() => {
                            action?.startEditable?.(record.id);
                        }}
                    >
                        详情
                    </a>,
                ],
            },
        ],
        [false],
    );

    const actionRef = useRef<ActionType>();

    return (
        <PageContainer title="组长管理">
            <ProTable
                columns={columns}
                actionRef={actionRef}
                rowKey="id"
                options={{ fullScreen: true, density: true, setting: true }}
                request={() => getLeader()}
                toolBarRender={() => [
                    <Button type="primary">保存</Button>,
                    <Button type="primary">导出</Button>
                ]}
            />
        </PageContainer>
    );

}

